<template>
    <div class="main p-4">
        <el-form :model="formData" inline>
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="formData.mobile" type="number" placeholder="输入手机号码" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="真名" prop="realName">
                <el-input v-model="formData.realName" placeholder="输入真名"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button @click="query">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
        :data="paperList"
        >
            <el-table-column label="真实姓名" prop="realName" />
            <el-table-column label="手机" prop="mobile" />
            <el-table-column label="是否付费">
                <template #default="{row}">
                    <span v-if="row.payType == 1">已付费</span>
                    <span v-else>未付费</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="是否已删除" prop="isDelete">
                <template #default="{row}">
                    <span v-if="row.isDelete == 1">是</span>
                    <span v-else-if="row.isDelete == 0">否</span>
                </template>
            </el-table-column> -->
            <el-table-column label="状态" prop="status">
                <template #default="{row}">
                    <span v-if="row.status == 0">正常</span>
                    <span v-else-if="row.status == 1">锁定</span>
                    <span v-else-if="row.status == 2">废弃</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{row}">
                    <el-button @click="edit(row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="del(row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="center mt-6">
            <el-pagination
            v-model:current-page="pageConfig.current"
            v-model:page-size="pageConfig.limit"
            :page-sizes="pageConfig.sizes"
            :small="false"
            :layout="pageConfig.layout"
            :total="pageConfig.total"
            :hide-on-single-page="true"
            @size-change="getTableData"
            @current-change="getTableData"
            @next-change="getTableData"
            @prev-change="getTableData"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onActivated, reactive, ref } from 'vue';
import request from '@/Utils/request';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const paperList = ref<any[]>([]);

const router = useRouter();

// 分页配置
let pageConfig = reactive({
    limit: 20,
    sizes: [10, 20, 30, 40, 50],
    current: 1,
    total: 0,
    layout: 'sizes, prev, pager, next, total, jumper'
});

const formData = reactive({
    realName: '',
    mobile: '',
});

// 点击编辑
const edit = (row: any) => {
    router.push({
        path: '/saveUser',
        params: {
            userId: row.id
        },
        name: 'SaveUser',
    });
};

// 点击删除
const del = async (row: any) => {
    try {
        await ElMessageBox.confirm(
            '确认删除会员吗？',
            '提示',
            {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await request({
            url: '/memberInfo/delete',
            method: 'post',
            contentTypeIsForm: true,
            showLoading: {},
            errorToast: true,
            data: {
                id: row.id
            }
        });
        ElMessage({
            message: '删除成功',
            type: 'success'
        });
        getTableData();
    } catch (error) {
        console.warn('error: ', error);
    }
};

// 点击查询
const query = () => {
    pageConfig.current = 1;
    pageConfig.total = 0;
    getTableData();
};

// 获取列表
const getTableData = async () => {
    try {
        const { records, total } = await request({
            method: 'post',
            url: '/memberInfo/list',
            data: {
                ...formData,
                limit: pageConfig.limit,
                page: pageConfig.current
            },
            contentTypeIsForm: false
        });
        paperList.value = records || [];
        // pageConfig.sizes = size;
        pageConfig.total = total;
    } catch (error) {
        
    }
};

const onShow = () => {
    getTableData();
};

onActivated(onShow);
</script>